<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no, email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>提交订单</title>
    <link href="../lib/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="../css/style_book.css">
<style type="text/css">
    .col-xs-9 *{
        float: right;
    }

</style>
</head>

<body>
    <div class="container-fluid">
        <header class="navbar navbar-fixed-top navbar-custom" id="navbar">
            <div class="navbar-header" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" style="cursor:pointer">
               <h4 class="brand">提交订单</h4> 
              <a class="navbar-brand" href="#"><span id="return" class="glyphicon glyphicon-menu-left"></span></a>
            </div>
        </header>
        <div class="container-fluid" id="container">
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-3">
                            <h5>商品名称:</h5>
                        </div>
                        <div class="col-xs-9">
                            <h5>赏花踏青美食之旅 (5月9日出团)</h5>
                        </div>
                    </div>
                </li>

                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-3">
                            <h5>数&nbsp;&nbsp;&nbsp;&nbsp;量:</h5>
                        </div>
                        <div class="col-xs-9">
                            <h5>1</h5>
                        </div>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-3">
                            <h5>总&nbsp;&nbsp;&nbsp;&nbsp;价:</h5>
                        </div>
                        <div class="col-xs-9">
                            <h5>65.00元</h5>
                        </div>
                    </div>
                </li>
            </ul>

            <h5>请选择支付方式</h5>
            <ul class="list-group">
                <li class="list-group-item">
                    <div class="row">
                        <a href="">
                            <div class="col-xs-3">
                                <h5>代&nbsp;&nbsp;金&nbsp;&nbsp;券:</h5>
                            </div>
                            <div class="col-xs-9">
                                <h5>使用代金券&nbsp;<span class="glyphicon glyphicon-menu-right"></span></h5>
                            </div>
                        </a>
                    </div>
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-3">
                            <h5>余&nbsp;&nbsp;&nbsp;&nbsp;额: <span>0</span></h5>
                        </div>
                        <div class="col-xs-9">
                            <h5>使用余额&nbsp;<input type="checkbox" aria-label="..."></h5>
                        </div>
                    </div>  
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-3">
                            <h5>还需支付:</h5>
                        </div>
                        <div class="col-xs-9">
                            <h5>65.00元</h5>
                        </div>
                    </div>  
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-2">

                            <h5><img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2592322928,924756096&fm=116&gp=0.jpg"></h5>
                        </div>
                        <div class="col-xs-8">
                            <h5>支付宝</h5>
                        </div>
                        <div class="col-xs-2">
                            <h5><input type="radio" aria-label="..."></h5>
                        </div>
                    </div>  
                </li>
                <li class="list-group-item">
                    <div class="row">
                        <div class="col-xs-2">
                            <h5><img src="https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=853333911,1129934628&fm=116&gp=0.jpg"></h5>
                        </div>
                        <div class="col-xs-8">
                            <h5>银联</h5>
                        </div>
                        <div class="col-xs-2">
                            <h5><input type="radio" aria-label="..."></h5>
                        </div>
                    </div>  
                </li>
                <div class="row">
                    <button class="btn btn-success center-block" style="margin-top:2em;">提交订单</button>
                </div>
            </ul>

        </div>
</body>
<script type="text/javascript" src="../lib/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="../lib/bootstrap/dist/js/bootstrap.min.js"></script>

</html>
